<template>
  <el-dialog
    title="商品库存不足详情"
    :visible="visible"
    @close="exportCancel"
    @open="exportOpen"
    class="main_dialog dialog1000"
  >
    <p>请将下列商品库存补充充足后，再发货出库</p>
    <MainTable
      max-height="400"
      v-loading="listLoading"
      :columns="inventoryDialogColumns"
      :tableData="tableList"
      :enableHeaderDrag="false"
      class="custom-table mg-t-12"
    >
      <template #user_name="{ row }">
        <div class="boederBox border-left">
          <span
            class="boederText"
            v-for="(item, index) in row.order_list"
            :key="index"
          >
            {{ item.user_name }}
          </span>
        </div>
      </template>
      <template #order_sn="{ row }">
        <div class="boederBox">
          <span
            class="boederText"
            v-for="(item, index) in row.order_list"
            :key="index"
          >
            {{ item.order_sn }}
          </span>
        </div>
      </template>
      <template #order_num="{ row }">
        <div class="boederBox">
          <span
            class="boederText"
            v-for="(item, index) in row.order_list"
            :key="index"
          >
            {{ item.order_num }}
          </span>
        </div>
      </template>
      <template #sort_num="{ row }">
        <div class="boederBox">
          <span
            class="boederText"
            v-for="(item, index) in row.order_list"
            :key="index"
          >
            {{ item.sort_num }}
          </span>
        </div>
      </template>
    </MainTable>
    <!-- <div class="flex-btw mg-t-10">
      <div></div>
      <MainPagination
        background
        :current-page="current.page"
        :page-size="current.sise"
        :page-sizes="[50, 100, 200]"
        :total="totalCount"
        @size-change="changeLimit"
        @current-change="changePage"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div> -->
  </el-dialog>
</template>

<script>
import { getLessStorageGoods } from "@/api/warehouse/warehouseDelivery";
import { inventoryDialogColumns } from "../../mockData.js";
import { packApi } from "@/utils/public";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    taskId: {
      type: [String, Number, Object],
      default: null
    }
  },
  data() {
    return {
      inventoryDialogColumns,
      current: {
        page: 1,
        size: 20
      },
      totalCount: 1,
      tableList: [],
      listLoading: false,
    };
  },
  methods: {
    // 列表
    getList() {
      this.listLoading = true;
      let data = packApi({
        task_id: this.taskId
      });
      getLessStorageGoods(data).then(res=> {
        if(res.errcode == 0) {
          this.tableList = res.data.list;
          this.listLoading = false;
        } else {
          this.$message.error(res.errmsg)
        }
      });
    },
    // 分页
    changeLimit(pageSize) {
      this.current.size = pageSize;
      this.getList();
    },
    changePage(page) {
      this.current.page = page;
      this.getList();
    },
    // 弹框开启/关闭
    exportOpen() {
      this.getList();
    },
    exportCancel() {
      this.$emit("update:visible", false);
      this.resetData();
      this.$emit("cancel");
    },
    // 重置data数据
    resetData() {
      this.tableList = [];
      this.totalCount = 1;
      this.current = {
        page: 1,
        size: 20
      };
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
/deep/.custom-table {
  td {
    padding: 0;
    height: 50px;
    &.paddingAdjust .cell {
      padding: 0;
    }
  }
  th.paddingAdjust .cell {
    padding: 0;
    padding-left: 10px;
  }
}
.boederBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #EEEEEE;
  .boederText {
    width: 100%;
    height: 50px;
    line-height: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 10px;
    border-bottom: 1px solid #EEEEEE;
    &:last-child {
      border-bottom: none;
    }
  }
}
.border-left {
  border-left: 1px solid #EEEEEE;
}
</style>